<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .b {
        width: 100px;
    }

    .box {
        display: none;
        box-sizing: border-box;
        width: 100px;
        height: 120px;
        text-align: center;
        border: 1px solid rgb(133, 52, 165);
    }

    .box p {
        height: 40px;
    }

    #gb {
        border-top: 1px solid rgb(133, 52, 165);
    }

    p:hover {
        background-color: rgb(142, 98, 159);
    }
    #box1 div{
        margin: auto;
        width: 500px;

        height: 100px;
        border: 1px solid #000;
        text-align: center;
        padding: 10px;
    }
    #body{
        height: 100%;
    }
    #box3{
        position: fixed;
        width: 400px;
        height: 200px;
        border: 4px solid #ff9900;
        display: none;
        top: 0;
        margin: auto;
        margin-top: 200px;
        left: 0;
        margin-left: 600px;
       
    }
    #box3 .box3a{
        box-sizing: border-box;
        width:400px;
        height: 40px;
        background-color: #ffcc00;
        text-align: right;
        padding-right: 10px;
        line-height: 30px;
        border: 2px solid #ff9900;

    }
    #box3 .box3b{
        background-color: #fff;
        width: 400px;
        height: 160px;
    }
    #box3 .box3a button{
        width: 20px;
        height: 20px;
       border: 2px solid #ff9900;
       color: #ff9900;
    }
    #box5{
        width: 200px;
        height: 200px;
        background-color: #000;
        color: #fff;
    }
</style>

<body id="body">
    <button class="b">选择输入法</button>
    <div class="box">
        <p>手打</p>
        <p>搜狗</p>
        <p id="gb">关闭</p>
    </div>
    <!-- 点击p显示弹框 -->
    <div id="box1">
        <div>
        新华网北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。
    </div>
    <div>4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，决不能"下不为例"；抓好食品安全要突出一个"严"字，做到严防、严查、严处。</div>
    <div>宁夏重点开展了四轮问题乳粉彻查清缴工作，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。</div>
    <div>宁夏重点开展了四轮问题乳粉彻查清缴工作，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。</div>
   
    </div>
    <div id="box2">
        <input type="text" id="val1">
        <p>输入数字求和，内容用，隔开</p>
        <button id="qiuhe">求和</button>
        <span id="he"></span>
    </div>
    <!-- 弹出层 -->
    <button id="box3tc">弹出层</button>
    <div id="box3">
        <div class="box3a">
            <button id="box3x">X</button>
        </div>
        <div class="box3b"></div>
    </div>
    <!-- 函数传参改变div -->
    <div>
        <p>属性名：<input type="text" id="typename" value="backgroundColor"  placeholder="backgroundColor"></p>
        <p>属性值：<input type="text" id="types"  value="red" placeholder="red"></p>
        <p><button id="type1">确定</button><button id="type2">重置</button></p>
    </div>
    <div id="box5">选择属性 更改我吧</div>
</body>
<script>
    var xz = document.getElementsByClassName('b')[0]
    var gb = document.getElementById('gb')
    var box = document.getElementsByClassName('box')[0]
    xz.onclick = function () {
        box.style.display = "block"
    }
    gb.onclick = function () {
        box.style.display = "none"
    }
    //输入法切换
    var box1=document.getElementById('box1').getElementsByTagName('div')
    for (let index = 0; index < box1.length; index++) {
       box1[index].onclick=function(){
        alert(box1[index].textContent)
       }
        
    }
    //点击弹出内容
    //  <div id="box2">
    //         <input type="text" id="qiuhe">
    //             <p>输入数字求和，内容用，隔开</p>
    //             <button id="qiuhe">求和</button>
    //             <span id="he"></span>
    //     </div>
    var qiuhe=document.getElementById('qiuhe')
    var  val1=document.getElementById('val1')
    var he=document.getElementById('he')
    
        
        qiuhe.onclick=function(){
            var num = 0
            console.log(val1.value);
            var arr=val1.value.split(',')
            for (var i in arr){
                num=num+arr[i]*1
            }
            he.textContent=num
        }
        //弹出层
        var body=document.getElementById('body')
        var box3=document.getElementById('box3')
        var box3x=document.getElementById('box3x')
        var box3tc=document.getElementById('box3tc')
        box3x.onclick=function(){
            body.style.background=""
            box3.style.display = 'none'
        }
        box3tc.onclick=function(){
             body.style.background = "rgba(0,0,0,0.3)"
             box3.style.display='block'
        }
        //函数传参改变div
        var box5=document.getElementById('box5')
        var typename=document.getElementById('typename')
        var types=document.getElementById('types')
        var type1=document.getElementById('type1')
        var type2=document.getElementById('type2')
        type1.onclick=function(){
            var a=typename.value
            var b=types.value
            box5.style[a]=b
        }
        type2.onclick=function(){
            box5.style.cssText="background-color:#000;color:#fff;width:200px;height:200px"
            // console.log(typename.value);
        }
</script>

</html>